$(function () {
var filemanager = $('.filemanager'),
breadcrumbs = $('.breadcrumbs'),
fileList = filemanager.find('.data');
// Start by fetching the file data from scan.php with an AJAX request
$.get('scan.php', function (data) {
var response = [data],
currentPath = '',
breadcrumbsUrls = [];
var folders = [],
files = [];
// This event listener monitors changes on the URL. We use it to
// capture back/forward navigation in the browser.
$(window).on('hashchange', function () {
goto(window.location.hash);
// We are triggering the event. This will execute
// this function on page load, so that we show the correct folder:
}).trigger('hashchange');
// Hiding and showing the search box
filemanager.find('.search').click(function () {
var search = $(this);
search.find('span').hide();
search.find('input[type=search]').show().focus();
});
// Listening for keyboard input on the search field.
// We are using the "input" event which detects cut and paste
// in addition to keyboard input.
filemanager.find('input').on('input', function (e) {
folders = [];
files = [];
var value = this.value.trim();
if (value.length) {
filemanager.addClass('searching');
// Update the hash on every key stroke
window.location.hash = 'search=' + value.trim();
}
else {
filemanager.removeClass('searching');
window.location.hash = encodeURIComponent(currentPath);
}
}).on('keyup', function (e) {
// Clicking 'ESC' button triggers focusout and cancels the search
var search = $(this);
if (e.keyCode == 27) {
search.trigger('focusout');
}
}).focusout(function (e) {
// Cancel the search
var search = $(this);
if (!search.val().trim().length) {
window.location.hash = encodeURIComponent(currentPath);
search.hide();
search.parent().find('span').show();
}
});
// Clicking on folders
fileList.on('click', 'li.folders', function (e) {
e.preventDefault();
var nextDir = $(this).find('a.folders').attr('href');
if (filemanager.hasClass('searching')) {
// Building the breadcrumbs
breadcrumbsUrls = generateBreadcrumbs(nextDir);
filemanager.removeClass('searching');
filemanager.find('input[type=search]').val('').hide();
filemanager.find('span').show();
}
else {
breadcrumbsUrls.push(nextDir);
}
window.location.hash = encodeURIComponent(nextDir);
currentPath = nextDir;
});
// Clicking on breadcrumbs
breadcrumbs.on('click', 'a', function (e) {
e.preventDefault();
var index = breadcrumbs.find('a').index($(this)),
nextDir = breadcrumbsUrls[index];
breadcrumbsUrls.length = Number(index);
window.location.hash = encodeURIComponent(nextDir);
});
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
// Navigates to the given hash (path)
function goto(hash) {
hash = decodeURIComponent(hash).slice(1).split('=');
if (hash.length) {
var rendered = '';
// if hash has search in it
if (hash[0] === 'search') {
filemanager.addClass('searching');
rendered = searchData(response, hash[1].toLowerCase());
if (rendered.length) {
currentPath = hash[0];
render(rendered);
}
else {
render(rendered);
}
}
// if hash is some path
else if (hash[0].trim().length) {
rendered = searchByPath(hash[0]);
if (rendered.length) {
currentPath = hash[0];
breadcrumbsUrls = generateBreadcrumbs(hash[0]);
render(rendered);
}
else {
currentPath = hash[0];
breadcrumbsUrls = generateBreadcrumbs(hash[0]);
render(rendered);
}
}
// if there is no hash
else {
currentPath = data.path;
breadcrumbsUrls.push(data.path);
render(searchByPath(data.path));
}
}
}
// Splits a file path and turns it into clickable breadcrumbs
function generateBreadcrumbs(nextDir) {
var path = nextDir.split('/').slice(0);
for (var i = 1; i < path.length; i++) {
path[i] = path[i - 1] + '/' + path[i];
}
return path;
}
// Locates a file by path
function searchByPath(dir) {
var path = dir.split('/'),
demo = response,
flag = 0;
for (var i = 0; i < path.length; i++) {
for (var j = 0; j < demo.length; j++) {
if (demo[j].name === path[i]) {
flag = 1;
demo = demo[j].items;
break;
}
}
}
demo = flag ? demo : [];
return demo;
}
// Recursively search through the file tree
function searchData(data, searchTerms) {
data.forEach(function (d) {
if (d.type === 'folder') {
searchData(d.items, searchTerms);
if (d.name.toLowerCase().match(searchTerms)) {
folders.push(d);
}
}
else if (d.type === 'file') {
if (d.name.toLowerCase().match(searchTerms)) {
files.push(d);
}
}
});
return { folders: folders, files: files };
}
// Render the HTML for the file manager
function render(data) {
var scannedFolders = [],
scannedFiles = [];
if (Array.isArray(data)) {
data.forEach(function (d) {
if (d.type === 'folder') {
scannedFolders.push(d);
}
else if (d.type === 'file') {
scannedFiles.push(d);
}
});
}
else if (typeof data === 'object') {
scannedFolders = data.folders;
scannedFiles = data.files;
}
// Empty the old result and make the new one
fileList.empty().hide();
if (!scannedFolders.length && !scannedFiles.length) {
filemanager.find('.nothingfound').show();
}
else {
filemanager.find('.nothingfound').hide();
}
if (scannedFolders.length) {
scannedFolders.forEach(function (f) {
var itemsLength = f.items.length,
name = escapeHTML(f.name),
icon = '';
// Function need to checked by MR! -> Otherwise delete!!!
// icon = '',
// iconpath = 'images/icons/' + f.path + '.png';
// function imageExists(image_url){
// var http = new XMLHttpRequest();
// http.open('HEAD', image_url, false);
// http.send();
//
// return http.status != 404;
// }
// if (imageExists(iconpath)) {
// icon = '';
// } else if(itemsLength) {
// icon = '';
// }
if (itemsLength) {
icon = '';
}
if (itemsLength == 1) {
itemsLength += ' item';
}
else if (itemsLength > 1) {
itemsLength += ' items';
}
else {
itemsLength = 'Empty';
}
var folder = $('' + icon + '' + name + ' ' + itemsLength + '');
fileList.append(folder)
});
}
if (scannedFiles.length) {
// empty playlist
var playlist = [];
scannedFiles.forEach(function (f) {
var fileSize = bytesToSize(f.size),
name = escapeHTML(f.name),
fileType = name.split('.'),
icon = '';
fileType = fileType[fileType.length - 1];
if (fileType == "db") {
return;
}
if (fileType == "jpg") {
icon = '';
var file = $('' + icon + '' + name + ' ' + fileSize + '');
} else if (fileType == "jpeg") {
icon = '';
var file = $('' + icon + '' + name + ' ' + fileSize + ''); file.appendTo(fileList);
} else if (fileType == "png") {
icon = '';
var file = $('' + icon + '' + name + ' ' + fileSize + ''); file.appendTo(fileList);
} else if (fileType == "gif") {
icon = '';
var file = $('' + icon + '' + name + ' ' + fileSize + ''); file.appendTo(fileList);
} else {
icon = '.' + fileType + '';
}
if (fileType == "mp4") {
var style = "";
// https://stackoverflow.com/questions/2980143/i-want-to-store-javascript-array-as-a-cookie/2980163
// get saved cookie information
var json_str = getCookie("watchedVideoArray");
if (json_str != "") {
var arr_watchstatus = JSON.parse(json_str);
if (arr_watchstatus.includes(f.path)) {
style = 'style="display: inline;"';
}
}
// Add whole array-elemtent to playlist.
playlist.push({
src: f.path,
opts: {
caption: name
}
});
var file = $('' + icon + '' + name + ' ' + fileSize + '❌✅');
}
else {
var file = $('' + icon + '' + name + ' ' + fileSize + '');
}
file.appendTo(fileList);
});
//console.log(playlist); // Print Playlist to dev-console
//Fancybox initialisieren
$('[data-fancybox="playlist"]').fancybox({
loop: false,
buttons : [
'thumbs',
'close'
],
thumbs : {
autoStart : true
},
afterLoad : function(instance, current) {
console.log("next video! :)");
console.log("--------------");
console.log(instance);
console.log("--------------");
console.log(current);
console.log("--------------");
// append new value to the array
arr_watchstatus.push(current.opts.$orig[0].dataset.src); // adds new video path to array!
var json_str = JSON.stringify(arr_watchstatus); // JSON encodes the array
setCookie('watchedVideoArray', json_str); // Set new JSON Value to cookie
current.opts.$orig[0].childNodes[5].style.display = "inline"; // Set green thick!
},
//Playlist als Option übergeben
video: {
playList: playlist
}
});
}
// Generate the breadcrumbs
var url = '';
if (filemanager.hasClass('searching')) {
url = 'Search results: ';
fileList.removeClass('animated');
}
else {
fileList.addClass('animated');
breadcrumbsUrls.forEach(function (u, i) {
var name = u.split('/');
if (i !== breadcrumbsUrls.length - 1) {
url += '' + name[name.length - 1] + ' → ';
document.getElementById("backButton").href = "#" + u;
}
else {
url += '' + name[name.length - 1] + '';
}
});
}
breadcrumbs.text('').append(url);
// Show the generated elements and hide loader
document.querySelector(".loader").style.display = "none";
fileList.fadeIn();
}
// This function escapes special html characters in names
function escapeHTML(text) {
return text.replace(/\&/g, '&').replace(/\/g, '>');
}
// Convert file sizes from bytes to human readable units
function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return '0 Bytes';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}
});
});